<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas id="c1" width="600" height="400"></canvas>
    <button id="btn">播放/暂停</button>

    <script>
        /** @type {HTMLCanvasElement} */
        // 画布
        let c1 = document.getElementById("c1")
        // 画笔
        let ctx = c1.getContext("2d")
        // 获取图片
        let img = new Image()
        // 1620 x 1028
        img.src = "./img/people.png"
        img.onload = function () {
            // 图片对象 + 画布位置 + 图片宽高
            // ctx.drawImage(img, 0, 0, 600, 400)

            // 裁切图像的一部分
            // 图片对象 + 裁切起点 + 裁切终点 + 画布位置 + 图片宽高
            ctx.drawImage(img, 400, 0, 1000, 500, 0, 0, 600, 400)
        }

        let video = document.createElement("video")
        video.src = "./video/test.mp4"
        let icon = new Image()
        icon.src = "./img/money.png"

        btn.onclick = function () {
            if (video.paused) {
                video.play()
                render()
            } else {
                video.pause()
            }
        }
        function render() {
            // 视频
            ctx.drawImage(video, 0, 0, 600, 400)
            // 水印
            ctx.drawImage(icon, 0, 0, 60, 40)
            requestAnimationFrame(render)
        }


    </script>
</body>

</html>